<?php include('head.php')?>

<style>
.mainbody{

}
body>div{float: none;}
#table {
  vertical-align: middle;
  height: 100%;
  width: 100%;
}
#loading {
  text-align: center;
  padding: 20px 0;
  vertical-align: middle;
  height: 100%;
}
#menu_div {
  position: fixed;
  bottom: 0px;
  height: 45px;
  width: 100%;
  background: url(menu/navb1.png) repeat;
}
#loading img{
  -moz-box-shadow:0px 0px 4px 4px #666;
  -webkit-box-shadow:0px 0px 4px 4px #666;
  box-shadow: 0px 0px 4px 4px #666;
}
.load {
  text-align: center;
  padding: 20px 0;
  vertical-align: middle;
  height: 100%;
  filter: glow(color=#000000, Strength=5);
}
</style>
<script type="text/javascript" src="js/jquery.loadimage.js"></script>
</head>

<body id="gc" class="mainbody" style="background-image:url(gallery/play.gif); overflow: hidden" onload=loadXML(); onresize= release(); >
<table id="table" cellPadding=0 cellSpacing=0 width=100%>
<tr><td class="loading" id="loading"></td></tr>
</table>
<div id="empty">&nbsp;</div>
<div id="menu_div"><?php include('gallerymenu.php')?></div>

<script type="text/javascript">
  function removeChildElements(elem) {
    while (elem && elem.firstChild) {
      elem.removeChild(elem.firstChild);
    }
  };
  var p = 0; image = [];
  var total = 0;
  var id;
  
  var div = document.getElementById('loading');
  var span = document.getElementById('span_number');
  var table = document.getElementById('table');
  
  var currHref = location.href;
  var index = currHref.lastIndexOf("?");
  var param = "";
  if (index != "-1") { param = currHref.substr(index + 3); }
  var url = '';
  switch (param) {
    case "1":
      url = "xml/gallery1.xml";
      break;
    case "2":
      url = "xml/gallery2.xml";
      break;
    case "3":
      url = "xml/gallery3.xml";
      break;
    case "4":
      url = "xml/gallery4.xml";
      break;
    case "5":
      url = "xml/gallery5.xml";
      break;
    default:
      url = "xml/gallery1.xml";
      break;
  }
  
  var xmlDoc = null, xmlhttp = null;
  function loadXmlFile(url) {
    xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
    if (xmlhttp == null) {
      alert("你的浏览器不支持 XMLHttpRequest");
      return;
    }
    xmlhttp.open("GET", url, false);
    xmlhttp.setRequestHeader("Content-Type", "text/xml");
    xmlhttp.send(null);
    xmlDoc = xmlhttp.responseXML;
    return xmlDoc;
  }

//  if(window.ActiveXObject) {
//    var xmldoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
//    xmldoc.async = true; 
//    xmldoc.onreadystatechange = function () {
//        if (xmldoc.readyState == 4) {
//          loadXML();
//        }
//    };
//    xmldoc.load(url);
//  } else if (document.implementation&&document.implementation.createDocument) {
//    var xmldoc = document.implementation.createDocument("", "", null);
//    xmldoc.load(url);
//    xmldoc.onload = loadXML;
//  }

  function loadXML() {
    var xmldoc = loadXmlFile(url);
    var xmlNode = xmldoc.getElementsByTagName("pic");
    total = xmlNode.length;
    for (var i = 0; i < total; i++){
      node =  xmlNode[i];
      image[image.length] = node.getElementsByTagName("image")[0].firstChild.nodeValue;
    }
    firstImage();
  }

  function nextImage() {
    var iWidth = document.documentElement.clientWidth;
    var iHeight = document.documentElement.clientHeight - 100;
    table.style.height = (!-[1,]) ? iHeight + 'px' : (iHeight+53) + 'px';

    var btn = document.getElementById('play_btn');
    if (btn.name == "stop") {
      btn.src="gallery/play_btn.png";
      window.clearInterval(id);
    }
    if (p < total - 1) {
      ++p;
      removeChildElements(div);
      var img = document.createElement('img');
      img.src = image[p];
      div.appendChild(img);
      $("#loading img").LoadImage(true, iWidth, iHeight);
      picture_num();
    } else {
      p = 0;
      removeChildElements(div);
      var img = document.createElement('img');
      img.src = image[0];
      div.appendChild(img);
      $("#loading img").LoadImage(true, iWidth, iHeight);
      picture_num();
    }
  }
  function autoNextImage() {
    var iWidth = document.documentElement.clientWidth;
    var iHeight = document.documentElement.clientHeight - 100;
    table.style.height = (!-[1,]) ? iHeight + 'px' : (iHeight+53) + 'px';
    
    if (p < total - 1) {
      ++p;
      removeChildElements(div);
      var img = document.createElement('img');
      img.src = image[p];
      div.appendChild(img);
      $("#loading img").LoadImage(true, iWidth, iHeight);
      picture_num();
    } else {
      p = 0;
      removeChildElements(div);
      var img = document.createElement('img');
      img.src = image[0];
      div.appendChild(img);
      $("#loading img").LoadImage(true, iWidth, iHeight);
      picture_num();
    }
  } 
  function prevImage() {
    var iWidth = document.documentElement.clientWidth;
    var iHeight = document.documentElement.clientHeight - 100;
    table.style.height = (!-[1,]) ? iHeight + 'px' : (iHeight+53) + 'px';

    var btn = document.getElementById('play_btn');
    if (btn.name == "stop") {
      btn.src="gallery/play_btn.png";
      window.clearInterval(id);
    }
    if (p > 0) {
      --p;
      removeChildElements(div);
      var img = document.createElement('img');
      img.src = image[p];
      div.appendChild(img);
      $("#loading img").LoadImage(true, iWidth, iHeight);
      picture_num();
    }
  }
  
  function firstImage() {
    var iWidth = document.documentElement.clientWidth;
    var iHeight = document.documentElement.clientHeight - 100;
    table.style.height = (!-[1,]) ? iHeight + 'px' : (iHeight+53) + 'px';
    
    removeChildElements(div);
    var img = document.createElement('img');
    img.src = image[0];
    div.appendChild(img);
    $("#loading img").LoadImage(true, iWidth, iHeight);
    picture_num();
  }
  
  
  function picture_num() {
    removeChildElements(span);
    current_pos = p + 1;
    span.appendChild(document.createTextNode(current_pos + " / " + total));
  }

  function play() {
    var btn = document.getElementById('play_btn');
    if (btn.name == "play") {
      btn.name="stop";
      btn.src="gallery/stop_btn.png";
      id = window.setInterval(autoNextImage, 3000);
    } else {
      btn.name="play";
      btn.src="gallery/play_btn.png";
      window.clearInterval(id);
    }
  }

  function release() {
    var iWidth = document.documentElement.clientWidth;
    var iHeight = document.documentElement.clientHeight - 100;
    table.style.height = (!-[1,]) ? iHeight + 'px' : (iHeight+53) + 'px';
    $("#loading img").LoadImage(true, iWidth, iHeight, null, true);
  }
  
  document.getElementById("prev_btn").onclick = function() {prevImage();};
  document.getElementById("next_btn").onclick = function() {nextImage();};
  document.getElementById("play_btn").onclick = function() {play();};

</script>
</body>
</html>
